<template>
  <view class="tabbar-container">
    <block>
      <view
        class="tabbar-item"
        v-for="(item, index) in tabbarList"
        :class="[item.centerItem ? ' center-item' : '']"
        @click="changeItem(item)"
      >
        <view class="item-top"
          ><image
            :src="currentItem == item.id ? item.selectIcon : item.icon"
          ></image
        ></view>
        <view
          class="item-bottom"
          :class="[currentItem == item.id ? 'item-active' : '']"
        >
          <text>{{ item.text }}</text>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      currentItem: 0,
      tabbarList: [
        {
          id: 0,
          path: "/pages/index/index",
          icon: "/static/image/home_fill.png",
          selectIcon: "/static/image/home_fill_lan.png",
          text: "首页",
          centerItem: false,
        },
        {
          id: 2,
          text: "",
          centerItem: true,
        },
        {
          id: 3,
          path: "/pages/mine/index",
          icon: "/static/image/bg-me.png",
          selectIcon: "/static/image/bg-me-lan.png",
          text: "我的",
          centerItem: false,
        },
      ],
    };
  },
  mounted() {
    this.currentItem = this.currentPage;
    uni.hideTabBar();
  },
  methods: {
    changeItem(item) {
      let _this = this;
      //_this.currentItem = item.id;
      if (item.id != 2) {
        uni.switchTab({
          url: item.path,
        });
      } else {
        this.$emit("transfer", item);
      }
    },
  },
};
</script>
<style>
view {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.tabbar-container {
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 110rpx;
  box-shadow: 0 0 5px #999;
  display: flex;
  align-items: center;
  padding: 5rpx 0;
  color: #999999;
  z-index: 999;
}
.tabbar-container .tabbar-item {
  width: 33%;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.tabbar-container .item-active {
  color: #0678fd;
}
.tabbar-container .center-item {
  display: block;
  position: relative;
}
.tabbar-container .tabbar-item .item-top {
  width: 70rpx;
  height: 70rpx;
  padding: 10rpx;
}
.tabbar-container .center-item .item-top {
  flex-shrink: 0;
  width: 150rpx;
  height: 150rpx;
  position: absolute;
  top: -90rpx;
  left: calc(50% - 75rpx);
  border-radius: 50%;
  box-shadow: 0 0 5px #999;
  background-color:#2990FF;
  background-color: #ffffff;
  background-image: url("../../static/image/yuyue.jpg");
  background-size: 100% 100%;
}
.tabbar-container .tabbar-item .item-top image {
  width: 100%;
  height: 100%;
}
.tabbar-container .tabbar-item .item-bottom {
  font-size: 28rpx;
  width: 100%;
}
.tabbar-container .center-item .item-bottom {
  position: absolute;
  bottom: 5rpx;
}
</style>
